<!-- 约玩时间 -->
<template>
	<view class="publish-timeBox">

		<view class="title">邀约时间</view>

		<!-- 选择日期 -->
		<view class="item">
			<view class="item-title">
				<text>{{dateData.title}}</text>
				<text>{{dateData.value}}</text>
			</view>

			<view class="item-child">
				<view :class="{
					'item-child-item':true,
					'item-child-item2':index === dateIndex
				}" v-for="(res,index) in dateData.data" @click="setDateIndex(index)">
					{{res}}
				</view>
			</view>



		</view>


		<!-- 选择时间 -->
		<view class="item">
			<view class="item-title">
				<text>{{timeData.title}}</text>
				<text>{{timeData.value }}</text>
			</view>

			<view class="item-select">
				<text class="select-text">开始时间:</text>

				<view class="select-content" @click="show = true">
					<text>{{timeData.value | timeFilter}}</text>
					<uni-icons type="forward" size="28rpx"></uni-icons>
				</view>
			</view>
		</view>




		<!-- 日期弹出层 -->
		<u-datetime-picker :show="show2" v-model="dateValue" :minDate="dateValue" mode="date" itemHeight="88" :closeOnClickOverlay="true" @close="setPopShow2" @cancel="setPopShow2"
			@confirm="submit2"></u-datetime-picker>

		<!-- 时间弹出层 -->
		<u-datetime-picker :show="show"  mode="time" itemHeight="88" :closeOnClickOverlay="true" @close="setPopShow" @cancel="setPopShow"
			@confirm="submit1"></u-datetime-picker>


	</view>
</template>

<script>
	export default {
		props: {
			submit:{
				type:Function,
				default:()=>{}
			}
		},
		data() {
			return {
				dateValue: new Date().getTime(),
				
				// 日期数据
				dateData: {
					title: '选择日期',
					data: ['今天', '明天', '后天', '更多'],
					value: '',
				},

				// 时间数据
				timeData: {
					title: '选择时间',
					value: '',
				},

				show: false, // 时间
				show2: false, // 日期

				dateIndex: 0, // 选择时间
				dateIndex2: 0, // 取消弹窗后的记录

			};
		},
		filters: {
			timeFilter(val) {
				return val === '' ? '最早能选择08:00' : val
			}
		},
		created() {
			this.setDateIndex(0)
			
			this.dateInit()
			
		},
		watch:{
			'timeData.value':function(){
				this.$emit('submit',this.dateData.value + " " + this.timeData.value)
			},
			'dateData.value':function(){
				this.$emit('submit',this.dateData.value + " " + this.timeData.value)
			}
		},
		methods: {
			
			/**
			 * 初始化日期选择
			 */
			dateInit(){
				let curTime = new Date();
				let date = curTime.setDate(curTime.getDate()+3)
				this.dateValue = date
			},

			/**
			 * 选择今天明后天
			 */
			setDateIndex(val) {
				// 选中变色
				this.dateIndex = val
				
				// 记录弹窗打开前的色块
				if(val !== this.dateData.data.length - 1){
					this.dateIndex2 = val
				}

				let time = new Date()

				// 今天
				if (val === 0) {
					this.dateData.value = time.getFullYear() + '-' + this.initTimeShow(time.getMonth() + 1) + '-' + this
						.initTimeShow(time.getDate())
					this.timeData.value = this.initTimeShow((time.getHours() + 1)) + ":" + this.initTimeShow(time
						.getMinutes())
				}

				// 明天
				if (val === 1) {
					this.dateData.value = time.getFullYear() + '-' + this.initTimeShow(time.getMonth() + 1) + '-' + this
						.initTimeShow(time.getDate() + 1)
					this.timeData.value = '00:00'
				}

				// 后天
				if (val === 2) {
					this.dateData.value = time.getFullYear() + '-' + this.initTimeShow(time.getMonth() + 1) + '-' + this
						.initTimeShow(time.getDate() + 2)
					this.timeData.value = '00:00'
				}



				// 如果是更多,打开弹出层
				if (val === this.dateData.data.length - 1) {
					this.show2 = true
				}


			},

			/**
			 *给值补0的
			 */
			initTimeShow(val) {
				return val > 9 ? val : '0' + val
			},

			/**
			 * 设置时分弹出层显隐
			 */
			setPopShow() {
				this.show = false
			},

			/**
			 * 弹出层确定
			 */
			submit1(e) {
				
				this.setPopShow()

				// 获取当前时间
				let time = new Date()
				let timeData = this.initTimeShow((time.getHours() + 1)) + ":" + this.initTimeShow(time
					.getMinutes())
				
				// 当前时间
				let time1 = timeData.split(":").map(res => Number(res))
				
				// 选择时间
				let time2 = e.value.split(":").map(res => Number(res))

				// 如果是今天
				if (this.dateIndex === 0) {

					// 选择时间不能小于当前时间的时
					if (time2[0] < time1[0]+1) {
						uni.showToast({
							duration: 3000,
							icon: 'none',
							title: '当天需提前1小时预约'
						})
					}else if(time2[0] === time1[0]+1 && time2[1] < time1[1]){
						uni.showToast({
							duration: 3000,
							icon: 'none',
							title: '当天需提前1小时预约'
						})
					}else{
						this.timeData.value = e.value
					}
				}else{
					this.timeData.value = e.value
				}


				this.setPopShow()
			},


			/**
			 * 设置日期弹出层隐藏
			 */
			setPopShow2() {
				this.show2 = false
				
				this.dateIndex = this.dateIndex2
				
				
			},
			

			/**
			 * 日期确定
			 */
			submit2(e) {
				let time = new Date(e.value)

				this.dateData.value = time.getFullYear() + '-' + this.initTimeShow(time.getMonth() + 1) + '-' + this
					.initTimeShow(time.getDate())
				this.timeData.value = '00:00'
				
				// 关闭弹窗
				this.show2 = false
				this.dateIndex2 = this.dateIndex

			},



		}
	}
</script>

<style lang="less" scoped>
	.publish-timeBox {
		#padding(60rpx 24rpx 0 24rpx);

		.title {
			#font(32rpx, #333, 600);
			margin-bottom: 36rpx;
			#flex(-, center, center);
		}

		.item {
			&:not(:last-child) {
				margin-bottom: 48rpx;
			}

			.item-title {
				#font(24rpx, #333);
				#flex(-, space-between, center);
			}

			.item-child {
				#flex(-, space-between, center);
				width: 100%;
				margin-top: 24rpx;

				.item-child-item {
					@width: calc((100% - 72rpx) / 4);

					#flex(-, center, center);
					#box(@width, auto, 24rpx, #f6f7fd);
					#padding(24rpx);
				}

				.item-child-item2 {
					background-color: #EC606F;
					color: #fff;
				}


			}

			.item-select {
				margin-top: 24rpx;
				width: 100%;
				#flex(-, space-between, center);
			}
		}

	}
</style>